"use client";
import Link from "next/link";
import { usePathname, useRouter } from "next/navigation";
import { useState } from "react";
import { IconType } from "react-icons";
import { FiHome, FiHeart, FiMoon, FiBook } from "react-icons/fi";

export const RouteSelect = () => {
  const routes = [
    { Icon: FiHome, title: "Dashboard", key: "dashboard" },
    { Icon: FiBook, title: "答案之书", key: "book" },
    { Icon: FiMoon, title: "月相神谕卡", key: "moon" },
    { Icon: FiHeart, title: "爱自己的100中方式", key: "love" },
  ]

  const pathname = usePathname();
  const route = useRouter();
  const [currentRoute, setCurrentRoute] = useState(pathname.split("/")[1]);

  return (
    <div className="space-y-1">
      {
        routes.map(({ Icon, title, key }) => (
          <Route selected={key === currentRoute} Icon={Icon} title={title} key={key} handleChange={() => {
            setCurrentRoute(key);
            route.push(`/${key}`);
          }} />
        ))
      }
    </div>
  )
}

const Route = ({
  selected,
  Icon,
  title,
  handleChange,
}: {
  selected: boolean;
  Icon: IconType;
  title: string;
  handleChange: () => void;
}) => {
  return (
    <button 
      className={`duration-300 flex items-center justify-start gap-2 w-full rounded px-4 py-3 text-sm translate-[box-shadow,_background-color,_color] ${
        selected ? "bg-maincolor text-white shadow-subcolor font-bold" : "text-stone-700 hover:bg-subcolor bg-transparent shadow-none"
      }`}
      onClick={handleChange}
      >
      <Icon className={`${selected ? 'text-white' : ''}`} size={18}/>
      <span className="ml-2">{title}</span>
    </button>
  )
}